<template>
  <Modal
    v-model:active="nodeStitchingModel"
    transfer
    title="节点缝合"
    hide-mask
    draggable
    :no-footer="true"
    @close="closeBtn"
    :width="500"
  >
      <div class="title">
        <div class="title_color"></div>
        <div class="title_content">选项</div>
      </div>
      <div class="selectorBox">
        <RadioGroup v-model:value="pastenode.method" :options="methods" @change="onChangeMethod" />
      </div>
      <div class="title">
        <div class="title_color"></div>
        <div class="title_content">粘贴位置</div>
      </div>
      <Grid :gap="8" :columns="24" class="mb-20" v-if="pastenode.method !== 'multiNodes'">
        <Cell :width="8" :left="2">
          <Select v-model:value="position" :options="positionOptions" @change="onPositionChange" />
        </Cell>
        <Cell :width="10">
          <NumberInput
            v-model:value="pastenode.pos"
            :disabled="position !== -1"
            placeholder="请输入"
          />
        </Cell>
      </Grid>
      <Grid :gap="8" :columns="24" class="mb-20" v-if="pastenode.method !== 'nodePairs'">
        <Cell :width="18" :left="2" style="display: flex; align-items: center;">
          <Checkbox style="flex: 0 0 100px; margin-right: 60px;" v-if="pastenode.method === 'nodeSetPairs'" v-model:checked="pairTolable">Tolerance</Checkbox>
          <NumberInput
            v-model:value="pastenode.tol"
            :disabled="pastenode.method !== 'multiNodes' && !pairTolable"
            placeholder="请输入"
            @blur="onChangeMethod(pastenode.method)"
          />
        </Cell>
      </Grid>
      <div class="title">
        <div class="title_color"></div>
        <div class="title_content">选择器</div>
      </div>
      <div class="selector-buttons" v-if="pastenode.method !== 'nodeSetPairs'">
        <button class="selector-button" :class='{"active": setName === "paste_node"}'  @click="onChangeSetName('paste_node')">节点</button>
        <button class="selector-button icon-button" @click="handleClear">
          <img
            src="../../assets/delete.svg"
            alt=""
            class="icon imgStyle"
          />
        </button>
      </div>
      <div class="selector-wrapper" v-else>
        <div class="selector-buttons">
          <button class="selector-button" :class='{"active": setName === "paste_nodeset_1"}' @click="onChangeSetName('paste_nodeset_1')">节点</button>
          <button class="selector-button icon-button" @click="handleClear">
            <img
              src="../../assets/delete.svg"
              alt=""
              class="icon imgStyle"
            />
          </button>
        </div>
        <div class="selector-buttons">
          <button class="selector-button" :class='{"active": setName === "paste_nodeset_2"}'  @click="onChangeSetName('paste_nodeset_2')">节点</button>
          <button class="selector-button icon-button" @click="handleClear">
            <img
              src="../../assets/delete.svg"
              alt=""
              class="icon imgStyle"
            />
          </button>
        </div>
      </div>
      <div class="foot-box">
        <Button type="primary" @click="confirm">缝合</Button>
        <Button @click="closeBtn">取消</Button>
      </div>
  </Modal>
</template>
<script setup lang="ts">
import {
  Modal,
  Button,
  Grid,
  Cell,
  RadioGroup,
  Select,
  NumberInput,
  Checkbox,
  Notice
} from "cax-ui";
import { storeToRefs } from "pinia";
import { ref, reactive, watch } from "vue";
import { useRightMeshEditStore } from "@/UI/store/rightMeshEditStore";
import { _global } from "@/UI/store";
import { PastenodeApplyOptions, STATUS_CODE } from "@/FrontProcessing";
const rightMeshEditStore = useRightMeshEditStore();
const { nodeStitchingModel } = storeToRefs(rightMeshEditStore);

const pastenode = reactive({
  method: "nodePairs",
  pos: 0,
  tol: 1.0e-6
});
const methods = [
  {content: "Paste node pairs", label: "nodePairs"},
  {content: "Paste multi nodes", label: "multiNodes"},
  {content: "Paste node set", label: "nodeSetPairs"},
];
const setName = ref("paste_node")
const pairTolable = ref(false)
const position = ref(0)
const positionOptions = [
  {
    label: "first node",
    value: 0,
  },
  {
    label: "last node",
    value: 1,
  },
  {
    label: "COG",
    value: 0.5,
  },
  {
    label: "user defined",
    value: -1,
  },
];
let pairs_prev_point_ids: any[] | undefined = []

function onChangeMethod(value: string) {
  setName.value = value === 'nodeSetPairs' ? 'paste_nodeset_1' : 'paste_node';
  _global.Engine.state.set("Mode", STATUS_CODE.VERTEX_SELECT);
  _global.Engine.registerSelectPointRightClick();
}

function onPositionChange(val: number) {
  if (val !== -1) {
    pastenode.pos = val
  }
}

function onChangeSetName(name: string) {
  console.log('set name: ', name)
  if (pastenode.method === 'nodeSetPairs') {
    // nodeSetPairs时有两个节点选择器，这两个选择器切换时，将前一个选择器选择的节点发送到python
    console.log('set name: ', setName.value)
    _global.Engine.pastenode.addNodes(setName.value)
      .then(res => {
        console.log(setName.value, ' 的节点已经被 add！', res)
        pairs_prev_point_ids = res.nodeIds
      })
      .catch(err => {
        console.log(setName.value, ' 的节点 add 失败！')
      })
  }
  setName.value = name
}

function handleClear() {
  _global.Engine.pastenode.clear()
    .then(res => {
      Notice.success('已清理')
    })
}

function confirm() {
  _global.Engine.pastenode.addNodes(setName.value, pastenode.method === 'nodeSetPairs' ? pairs_prev_point_ids : undefined)
    .then(res => {
      const param: PastenodeApplyOptions = {
        method: pastenode.method,
        pos: pastenode.pos,
      }
      if (pastenode.method === 'multiNodes' || pastenode.method === 'nodeSetPairs' && pairTolable.value) {
        param.tol = pastenode.tol
      }
      _global.Engine.pastenode.apply(param)
        .then(res => {
          console.log('pastenode apply: ', res)
          // _global.Engine.state.set("Mode", STATUS_CODE.VERTEX_SELECT);
          // _global.Engine.registerSelectPointRightClick();
          Notice.success('已缝合')
        })
    })
    .catch(err => {
      console.log('add nodes err: ', err)
      Notice.error('没有选择节点')
    })
  // rightMeshEditStore.setNodeStitchingValue({...pastenode});
  // nodeStitchingModel.value = false;
}
function closeBtn() {
  nodeStitchingModel.value = false;
}

watch(nodeStitchingModel, (show) => {
  if (show) {
    _global.Engine.pastenode.enter(setName.value)
    _global.Engine.state.set("Mode", STATUS_CODE.VERTEX_SELECT);
    _global.Engine.registerSelectPointRightClick();
  } else {
    _global.Engine.pastenode.leave()
    _global.Engine.state.set("Mode", STATUS_CODE.NORMAL);
    _global.Engine.unregisterSelectPointRightClick();
  }
});
</script>
<style scoped>
.imgStyle {
  width: 20px;
  height: 20px;
}
.title {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 16px;
  margin-bottom: 16px;

  .title_color {
    width: 4px;
    height: 12px;
    background: #339af0;
    margin-right: 8px;
  }
  .title_content {
    opacity: 1;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    /* content/主要一级primary */
    /* 样式描述：--vxp-content-color-primary */
    color: #212529;
  }
}
.foot-box {
  margin-top: 40px;
  width: 100%;
  height: 40px;
  text-align: right;
}
.selectorBox {
  width: 100%;
  padding-left: 32px;
  margin-bottom: 20px;
}
.selector-wrapper {
  display: flex;
  justify-content: center;
}
.selector-buttons {
  margin: 0 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.selector-button {
  height: 32px;
  width: 160px;
  padding: 0 15px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  outline: none;
}

.selector-button.active {
  background-color: #e6f7a7;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  /* flex-grow: 1; */
  font-weight: normal;
}
.icon-button {
  width: 32px;
  padding: 3px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-left: none;
  background-color: #fff;
}
</style>
